<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="layout :: common_header(~{::title})">
    <title>采购单列表 - 仓库管理系统</title>
</head>
<body th:replace="layout :: common_body(~{::div.layui-body})">

<div class="layui-body" style="padding:15px;top: 0px;">
    <div class="hy-main">
        <!-- 不同部分 start -->
        <!-- start sp-wrapper -->
        <link rel="stylesheet" href="/sb/stock.css"/>
        <div class="sp-wrapper">
            <h2 class="sp-title"><a class="active">新增移库</a><a href="/stock_location/move_house_list">移库记录</a></h2>
            <form action="/stock_location/add_move_spec_from" id="sp-form" method="post">
                <input type="hidden" th:value="${billNo}" name="moveNo">
                <div class="sp-tool">
                    <span class="fl"><b
                            th:text="'单据编号：'+${billNo}">单据编号：123456789000000111</b><b>操作人：<input name="createBy"
                                                                                                 type="text"
                                                                                                 class="date"/></b></span>
                    <span class="fr"><i class="save" id="save">保存</i></span>
                </div>
                <div class="sp-tool">
			<span class="fl">移出库位：<select id="out_ck" style="margin-right:10px;width:100px;">
					<option selected disabled value="">仓库</option>
					<option th:each="h:${houses}" th:value="${h.getId()}" th:text="${h.getName()}">深圳仓</option>
				</select><select id="out_kq" style="margin-right:10px;width:100px;" >
					<option selected disabled value="">库区</option>
				</select><select id="out_hj" name="outLocationId" style="margin-right:10px;width:100px;">
					<option selected disabled value="">货架</option>
				</select></span>
                    <span class="fl" style="margin-left:20px;">移入库位：<select name="ck" id="in_ck"
                                                                            style="margin-right:10px;width:100px;">
					<option selected disabled value="">仓库</option>
					<option th:each="h:${houses}" th:value="${h.getId()}" th:text="${h.getName()}">深圳仓</option>
				</select><select name="kq" id="in_kq" style="margin-right:10px;width:100px;">
					<option selected disabled value="">库区</option>
				</select><select name="inLocationId" id="in_hj" style="margin-right:10px;width:100px;">
					<option selected disabled value="">货架</option>
				</select></span>
                </div>
                <div class="sp-table">
                    <table>
                        <thead>
                        <tr>
                            <th>商品</th>
                           <!-- <th>单位</th>-->
                            <th>数量</th>
                            <th>备注</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody id="sp-data">
                        <tr>
                            <td><input type="hidden" name="id" class="goodsId"><input type="text" name="number"
                                                                                           class="goods"
                                                                                           placeholder="请输入商品编码"
                                                                                           autocomplete="off"/></td>
                            <!--<td><input type="text" name="unit" class="unit"/></td>-->
                            <td><input type="number" name="amount" class="amount" placeholder="请输入移库数量"/></td>
                            <td><input type="text" name="note" class="note"/></td>
                            <td><i class="delete">-</i><i class="add">+</i></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </form>
        </div>
        <script src="/js/jquery-3.3.1.min.js"></script>
        <script type="text/javascript" src="/sb/Tips.min.js"></script>
        <script type="text/javascript">
            $(function () {
                function render(data) {
                    for (var i = 0, n = data.length, tpl = ''; i < n; i++) {
                        var goodsName = data[i].specNumber + ' ' + data[i].name + "_" + data[i].specName
                        tpl += '<li data-id="' + data[i].id + '" data-amount="' + data[i].currentQty + '" >' + goodsName + '</li>';
                    }
                    $('.sp-result').html(tpl);
                }

                function init() {
                    var $box = $('<ul class="sp-result"></ul>').appendTo($('body'));
                    var $status = false;
                    var $id = null; //ID
                    var $goods = null; //商品
                    var $unit = null; //单位
                    var $amount = null; //数量
                    var $note = null; //备注

                    $(document).click(function (e) {
                        if ($status) {
                            $box.hide();
                            $status = false;
                        }
                    });
                    $('#sp-data').delegate('.goods', 'click', function (e) {
                        e.stopPropagation();
                        var _this = $(this);
                        var _tr = _this.parent('td').parent('tr');
                        $id = _tr.find('.goodsId'); //ID
                        $goods = _this;
                        //$unit = _tr.find('.unit'); //单位
                        $amount = _tr.find('.amount'); //数量
                        $note = _tr.find('.note'); //备注

                        var _this = $(this);
                        var pos = _this.offset();
                        var x = pos.left;
                        var y = pos.top + _this.height();
                        $box.css({
                            left: x,
                            top: y
                        }).html('').hide();
                        $status = true;
                    });
                    $box.delegate('li', 'click', function (e) {
                        e.stopPropagation();
                        var _this = $(this);
                        $id.val(_this.attr('data-id')); //id
                        $goods.val(_this.text()); //商品
                        //$unit.val(_this.attr('data-unit')); //单位
                        $amount.val(_this.attr('data-amount')); //数量
                        $note.val(_this.attr('data-note')); //备注

                        $box.hide();
                        $status = false;
                    });
                    $box.click(function (e) {
                        e.stopPropagation();
                    });
                    // 商品搜索
                    $('#sp-data').delegate('.goods', 'input', function (e) {
                        e.stopPropagation();
                        if ($box.css('display') == 'none') {
                            $box.show();
                        }
                        var data = {
                            locationId: $("#out_ck  option:selected").val(),
                            rreservoirId: $("#out_kq  option:selected").val(),
                            shelfId: $("#out_hj  option:selected").val(),
                            number: $(this).val()
                        };
                        $.ajax({
                            url: "/ajax_stock/goods_spec_by_number",
                            type: "POST",
                            dataType: "json",
                            contentType: "application/json",
                            data: JSON.stringify(data),
                            success: function (res) {
                                $('.sp-result').html("");
                                if (res.code == 0 && res.data.length > 0) {
                                    console.log(res.data);
                                    render(res.data);
                                } else if (res.msg.length > 0) {
                                    Tips.alert(res.msg);
                                }
                            }
                        });
                    });
                }

                init();

                // 新增
                $('#sp-data').delegate('.add', 'click', function () {
                    $('#sp-data').append('<tr>\
						<td><input type="hidden" name="id" class="goodsId"><input type="text" name="goods" class="goods" placeholder="请输入商品编码" autocomplete="off" /></td>\
						<td><input type="text" name="amount" class="amount" placeholder="请输入移库数量" /></td>\
						<td><input type="text" name="note" class="note" /></td>\
						<td><i class="delete">-</i><i class="add">+</i></td>\
					</tr>');
                });
                // 删除
                $('#sp-data').delegate('.delete', 'click', function () {
                    if ($('#sp-data tr').size() < 2) {
                        return Tips.alert('至少保留一条分录');
                    }
                    $(this).parent('td').parent('tr').remove();
                });
                var checkCk = function () {
                    if ($("#in_ck  option:selected").val() == '') {
                        Tips.alert('请选择移入仓库');
                        return false;
                    }
                    return true;
                };
                var checkHq = function () {
                    if ($("#in_hq  option:selected").val() == '') {
                        Tips.alert('请选择移入货区');
                        return false;
                    }
                    return true;
                };
                var checkHj = function () {
                    if ($("#in_hj  option:selected").val() == '') {
                        Tips.alert('请选择移入货架');
                        return false;
                    }
                    return true;
                };
                var checkDate = function () {
                    if ($("#form_date").val() == '') {
                        Tips.alert('请选择操作日期');
                        return false;
                    }
                    return true;
                };
                var checkName = function () {
                    if ($('input[name=createBy]').val() == '') {
                        Tips.alert('请输入操作人');
                        return false;
                    }
                    return true;
                };
                $("#out_ck").on('change', function () {
                    var id = $(this).val();
                    $.ajax({
                        type: "POST",
                        url: "/ajax_stock_in/get_reservoir_by_locationId",
                        data: id,
                        dataType: 'json',
                        contentType: 'application/json',
                        success: function (data) {
                            var str = "<option selected disabled value=''>选择库区</option>";
                            var data1 = data.data;
                            for (var i = 0; i < data1.length; i++) {
                                str = str + "<option value = '" + data1[i].id + "'>" + data1[i].name + "</optiom>";
                            }
                            $("#out_kq").html(str);
                            $("#out_hj").contents().remove();
                        }
                    });
                })
                $("#out_kq").on('change', function () {
                    var id = $(this).val();
                    $.ajax({
                        type: "POST",
                        url: "/ajax_stock_in/get_shelf_by_reservoirId",
                        data: id,
                        dataType: 'json',
                        contentType: 'application/json',
                        success: function (data) {
                            var str = "<option selected disabled value=''>选择货架</option>";
                            var data1 = data.data;
                            for (var i = 0; i < data1.length; i++) {
                                str = str + "<option value = '" + data1[i].id + "'>" + data1[i].name + "</optiom>";
                            }
                            $("#out_hj").html(str);
                        }
                    });
                })

                $("#in_ck").on('change', function () {
                    var id = $(this).val();
                    $.ajax({
                        type: "POST",
                        url: "/ajax_stock_in/get_reservoir_by_locationId",
                        data: id,
                        dataType: 'json',
                        contentType: 'application/json',
                        success: function (data) {
                            var str = "<option selected disabled value=''>选择库区</option>";
                            var data1 = data.data;
                            for (var i = 0; i < data1.length; i++) {
                                str = str + "<option value = '" + data1[i].id + "'>" + data1[i].name + "</optiom>";
                            }
                            $("#in_kq").html(str);
                            $("#in_hj").contents().remove();
                        }
                    });
                })
                $("#in_kq").on('change', function () {
                    var id = $(this).val();
                    $.ajax({
                        type: "POST",
                        url: "/ajax_stock_in/get_shelf_by_reservoirId",
                        data: id,
                        dataType: 'json',
                        contentType: 'application/json',
                        success: function (data) {
                            var str = "<option selected disabled value=''>选择货架</option>";
                            var data1 = data.data;
                            for (var i = 0; i < data1.length; i++) {
                                str = str + "<option value = '" + data1[i].id + "'>" + data1[i].name + "</optiom>";
                            }
                            $("#in_hj").html(str);
                        }
                    });
                })
                // 保存
                $('#save').click(function () {
                    if (!checkCk()) return;
                    if (!checkHq()) return;
                    if (!checkHj()) return;
                    if (!checkDate()) return;
                    if (!checkName()) return;
                    $('#sp-form').submit();
                });
            });
            layui.use('laydate', function () {
                var laydate = layui.laydate;

                //执行一个laydate实例
                laydate.render({
                    elem: '#form_date' //指定元素
                });
            });
        </script>
        <!-- end sp-wrapper -->
        <!-- 不同部分 end -->
    </div>
</div>
</body>
</html>
